<template>
  <div class="app">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="conres">
            <div class="ra">
              <h3>物流状态查询</h3>
            </div>
            <div class="yuansdj">
              <div class="lino">快速筛选订单：</div>
              <div class="list_org">
                <ul>
                  <li>揽件超时</li>
                  <li>派发超时</li>
                  <li>即将揽件超时</li>
                </ul>
              </div>
            </div>
            <div class="forms">
              <el-form
                :model="ruleForm"
                :inline="true"
                :rules="rules"
                ref="ruleForm"
                label-width="140px"
                class="demo-ruleForm"
              >
                <el-form-item label="包裹状态：">
                  <el-select v-model="ruleForm.region" placeholder="请选择包裹状态">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="状态异常：">
                  <el-select v-model="ruleForm.name" style="width: 100%;">
                    <el-option label="区域一11" value="shangha11i"></el-option>
                    <el-option label="区域二11" value="beijing11"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="处理状态：">
                  <el-select v-model="ruleForm.posin" style="width: 100%;">
                    <el-option label="区域一11" value="shangha11i"></el-option>
                    <el-option label="区域二11" value="beijing11"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="物流公司：">
                  <el-select v-model="ruleForm.name" style="width: 100%;">
                    <el-option label="区域一11" value="shangha11i"></el-option>
                    <el-option label="区域二11" value="beijing11"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="订单编号：" prop="bian">
                  <el-input v-model="ruleForm.bian" style="width: 100%;"></el-input>
                </el-form-item>

                <el-form-item label="运单号：" prop="bian">
                  <el-input v-model="ruleForm.bian" style="width: 100%;"></el-input>
                </el-form-item>

                <el-form-item label="活动时间">
                  <el-col :span="11">
                    <el-form-item prop="date1">
                      <el-date-picker
                        v-model="ruleForm.date1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>

                <el-form-item style="margin-left: 347px;">
                  <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
                  <el-button type="danger" @click="resetForm('ruleForm')">批量导出</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="dzlist">
              <div class="tat">查询结果</div>
              <el-table
                :data="tableData"
                :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}" style="width: 873px;margin:15px auto"
              >
                <el-table-column prop="name" label="发货时间"></el-table-column>
                <el-table-column prop="date" label="订单编号"></el-table-column>
                <el-table-column prop="address" label="物流公司"></el-table-column>
                <el-table-column prop="eee" label="运单编号"></el-table-column>
                <el-table-column prop="name" label="包裹状态"></el-table-column>
                <el-table-column prop="date" label="当前异常类型"></el-table-column>
                <el-table-column prop="address" label="异常时长"></el-table-column>
                <el-table-column prop="eee" label="处理状态"></el-table-column>
              </el-table>
              <div class="feny">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="1000"
                      style="margin-top: 5px;"
                    ></el-pagination>第
                    <el-input size="mini" style="width: 50px;"></el-input>页
                    <button
                      style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;"
                    >跳转</button>
                  </div>
            </div>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessL from "@/components/businessL";
import businessF from "@/components/businessF";
export default {
  components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
  },
  data() {
    return {
      ruleForm: {
        name: "",
        posin: "",
        bian: "",
        region: "",
        desc: "",
        date1: ""
      },
      rules: {
        name: [{ required: true, message: "请输入您的姓名", trigger: "blur" }],
        posin: [{ required: true, message: "请输入您的电话", trigger: "blur" }],
        desc: [
          { required: true, message: "请输入您的详细地址", trigger: "blur" }
        ]
      },
      tableData: []
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped>
.app /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}

.back {
  background-color: #f06048;
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}
.conres .ra h3 {
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  border-bottom: 1px solid #cecece;
  margin-top: 15px;
  padding-bottom: 10px;
}

.shejh {
  display: flex;
  margin-left: 20px;
  margin-top: 15px;
  line-height: 20px;
}
.shejh div:nth-child(1) {
  font-size: 20px;
}
.shejh div:nth-child(2) {
  font-size: 14px;
  margin-left: 40px;
}
.wdmewdefme {
  display: flex;
}
.mubiao {
  display: flex;
  margin-left: 20px;
  margin-top: 40px;
}
.toefmn_wk {
  margin-right: 12px;
}
.toefmn_wk span {
  display: block;
}
.toefmn_wk .ene {
  color: #f06048;
}
.one_mw {
  display: flex;
}
.wnwe_wdnn .ee_q {
  margin-top: 20px;
}
.wnwe_wdnn .ee_q h5 {
  font-size: 18px;
}
.wnwe_wdnn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  width: 300px;
}
.top_o2 {
  font-size: 18px;
  line-height: 20px;
  margin-left: 20px;
  margin-top: 25px;
  display: flex;
}
.ower_to {
  width: 873px;
  height: 141px;
  border: solid 1px #a0a0a0;
  margin: 10px auto;
  display: flex;
  text-align: center;
  line-height: 45px;
}
.ower_to h4 {
  font-size: 18px;
}
.jaoyishuj {
  margin-bottom: 35px;
}
.errror .hekome1 {
  width: 20%;
  border-right: 1px solid #a0a0a0;
}
.hekome2 {
  text-align: center;
  margin-left: 20px;
}
.list_org {
  height: 40px;
}
.yuansdj {
  display: flex;
  border-bottom: 6px solid #fff;
}
.lino {
  display: inline-block;
  font-size: 20px;
  margin-left: 10px;
  line-height: 40px;
  margin-top: 10px;
}
.list_org ul li {
  display: inline-block;
  line-height: 40px;
  width: 100px;
  border: 1px solid rgb(199, 199, 199);
  text-align: center;
  font-size: 16px;
  margin-top: 10px;
  margin-left: 8px;
}
.forms {
  margin-top: 20px;
}
.dzlist .tat {
  font-size: 18px;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
.feny {
  display: flex;
  line-height: 40px;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}
</style>